<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		  <link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<script src="../vue@3.2.23.js"></script>
		<style>
			.v-enter-from{
				background-color: red;
			}
			.v-enter-active{
				transition:all 2s;
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.v-enter-to{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<transition 
					@before-enter=""
					@enter=""
					@after-enter=""
					@before-leave=""
					@leave=""
					@after-leave=""
			>
				<div v-if="isShow">动画1</div>
			</transition>
			<transition 
					@before-enter=""
					@enter=""
					@after-enter=""
					@before-leave=""
					@leave=""
					@after-leave=""
			>
				<div v-if="isShow">动画2</div>
			</transition>
			<transition enter-active-class="animate__animated animate__headShake" leave-active-class="animate__animated animate__bounceOut">
				<div v-if="isShow">动画3</div>
			</transition>
			<transition  enter-active-class="animate__animated animate__headShake" leave-active-class="animate__animated animate__bounceOut">
				<component :is="com">4</component>
			</transition>
			<button @click="changeIsShow()">显示/隐藏</button>
		</div>
	</body>
</html>
<script>
	const a={
		template:'<div>组件a</div>'
	}
	const b={
		template:'<div>组件b</div>'
	}
	const app=Vue.createApp({
		components:{a,b},
		data(){
			return{
				isShow:true,
				com:'a'
			}
		},
		methods:{
			changeIsShow(){
				this.isShow=!this.isShow
				if(this.com=='a'){
					this.com='b'
				}else{
					this.com='a'
				}
			}
			
		}
	})
	const vm=app.mount('#app')
</script>